<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Wap 电商平台</title>
		<meta charset="UTF-8">
		<script th:replace="common/head::static"></script>
	</head>
</html>
<body>
	<div id="app" class="goods-details-container" >
		<nut-navbar :back-show="false" :right-show="false" class="demo-nav" title="商品详情"  @on-click-back="back" ></nut-navbar>
		<nut-swiper
		    direction="horizontal"
		    :canDragging="false"
		    :paginationVisible="true"
		    :swiperData="dataItem"
		    ref="demo5"
		>
		    <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
		    	<img :src="item.imgSrc" style="max-width:100%; max-height:100%;min-width:100%;" class="nut-img-lazyload"/> 
		    </div>
		</nut-swiper>
		<column class="goods-warp" style="padding:0px 10px;">
			<row class="head" style="width:100%;">
				<span class="price" th:text="'￥' + ${item.price}"></span>
				<column style="float: right;margin-right: 10px;text-align:center;font-size:12px;">
					<i class="nut-icon nut-icon-self" style="margin-left:3px;">
						<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
						<path d="M17.3,22.4c0.7,0.4,1.6,0.1,2-0.6c0.2-0.3,0.2-0.6,0.1-0.9l-1-5.7l4.2-4c0.6-0.6,0.6-1.5,0-2.1
		c-0.2-0.2-0.5-0.4-0.9-0.4L16,7.6l-2.6-5.2c-0.4-0.7-1.3-1-2-0.7c-0.3,0.1-0.5,0.4-0.7,0.7L8.2,7.6L2.4,8.5C1.5,8.6,1,9.3,1.1,10.2
		c0,0.3,0.2,0.6,0.4,0.9l4.2,4l-1,5.7c-0.1,0.8,0.4,1.6,1.2,1.7c0.3,0.1,0.7,0,0.9-0.1l5.2-2.7L17.3,22.4z"></path>
						</svg>
			    	</i>
			    	收藏
				</column>
			</row>
			<div class="title" th:text="${item.name}"></div>
		</column>
		
		<column class="goods-details-warp" style="padding:5px 10px 20px 10px;margin:20px 0px;">
			<div class="details-title" >商品详情</div>
			<div th:text="${item.desc}">
				商品内容巴拉巴拉巴拉
			</div>
		</column>
		
		<nut-button block shape="circle" style="position:fixed;bottom:0px;" @click="submit">购买</nut-button>
		
	</div>
	<script type="text/javascript"  th:inline="javascript">
		var imgs = [[${item.imgs}]];
	    var dataImgItem = [];
	    var imgBaseUrl = "https://airpass-training.oss-cn-hangzhou.aliyuncs.com/"
	    $.each(imgs, function(i,val){
	    	dataImgItem.push({  "imgSrc": imgBaseUrl + val});
	    });
		new Vue({
			el: '#app',
            data() {
				return {
			      	dataItem:[{
	                    name:1
	                },{
	                    name:2
	                },{
	                    name:3
	                },{
	                    name:4
	                }],
				    dataImgItem:dataImgItem
				}
			},
			created: function(){
				self = this;
				setTimeout(function(){
					$(".nut-swiper-pagination").show();
				},1000);
			},
			methods: {
				submit:function(){
					location.href = "/doAddOrder";
				},
				back : function(){
					location.href = "/goods"
				}
			}
		});
	</script>
</body>